.in, .out {
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 300ms;
  -webkit-animation-fill-mode: both;	
  -webkit-animation-duration: .65s;
  -webkit-backface-visibility: hidden;
}

.in {
  -webkit-animation-name: flipinfromleft;
}

.out {
  -webkit-animation-name: flipouttoleft;
}

.in.reverse {
  -webkit-animation-name: flipinfromright;
}

.out.reverse {
  -webkit-animation-name: flipouttoright;
}

@-webkit-keyframes flipinfromright {
  from { -webkit-transform: rotateY(-180deg) scale(.8); }
  to { -webkit-transform: rotateY(0) scale(1); }
}

@-webkit-keyframes flipinfromleft {
  from { -webkit-transform: rotateY(180deg) scale(.8); }
  to { -webkit-transform: rotateY(0) scale(1); }
}

@-webkit-keyframes flipouttoleft {
  from { -webkit-transform: rotateY(0) scale(1); }
  to { -webkit-transform: rotateY(-180deg) scale(.8); }
}

@-webkit-keyframes flipouttoright {
  from { -webkit-transform: rotateY(0) scale(1); }
  to { -webkit-transform: rotateY(180deg) scale(.8); }
}
